<template>
    <div>
      <el-button type="primary" style="margin-left: 16px" @click="RoomCodeAdd()">新增房号</el-button>
    <el-button type="text" @click="handleAllDelete()">批量删除</el-button>
    <el-button type="text" @click="handleAllUpdateStatus()">批量下架</el-button>


            <el-select v-model="roomcodes.status" placeholder="全部状态" style="width: 200px;" @change="RoomCodeGetlist()">
            <el-option  label="上架" value="true" />
            <el-option  label="下架" value="false" />
            </el-select>
            <el-select v-model="roomcodes.RoomTypeId" placeholder="选择房型" style="width: 200px;" @change="RoomCodeGetlist()">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
    <el-input
      v-model="roomcodes.RoomCode"
      style="max-width: 300px"
      placeholder="房号"
      class="input-with-select"
    >
    <template #append>
        <el-button @click="RoomCodeGetlist()" :icon="Search" />
      </template>
    </el-input>
    </div>
    <el-table ref="selectedRows" :data="tableData" style="width: 100%; margin-top: 30px;">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="roomTypeName" label="房型名称" width="150" />
      <el-table-column prop="roomCode" label="房号" width="150" />
      <el-table-column prop="roomCodeSort" label="排序" width="150" />
      <el-table-column prop="roomCodeMemo" label="备注" width="150" />
      <el-table-column prop="roomStatus" label="状态" width="150" >
        <template #default="{row}">
          <el-tag v-if="row.roomStatus == 1" type="success">上架</el-tag>
          <el-tag v-if="row.roomStatus==0" type="danger">下架</el-tag>
          </template>
        </el-table-column>
      <el-table-column label="操作" width="250" >
        <template #default="{row}">
          <el-button type="text" @click="RoomCodeUpdate(row)">编辑</el-button>
          <el-button type="text" @click="RoomCodeDelete(row)">删除</el-button>
          <el-button type="text" @click="RoomCodeStatus(row)" v-if="row.roomStatus==1">下架</el-button>
          <el-button type="text" @click="RoomCodeStatus(row)" v-if="row.roomStatus==0">上架</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div>
        <el-dialog v-model="roomCodeDialog" title="添加房号" width="500">
            <el-form :model="form">
            <el-form-item label="选择房型" :label-width="formLabelWidth">
            <el-select v-model="form.roomTypeId" placeholder="请选择房型" style="width: 200px;">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
            </el-form-item>
            <el-form-item label="房号" :label-width="formLabelWidth">
                <el-input v-model="form.roomCode" placeholder="房号" />
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="form.roomCodeSort" placeholder="排序" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.roomCodeMemo" placeholder="备注不超过9个字符" style="width: 200px;" />
            </el-form-item>
        </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roomCodeDialog = false">关闭</el-button>
        <el-button type="primary" @click="RoomCodeInsert()">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>
  <div>
        <el-dialog v-model="roomCodeUpdateDialog" title="编辑房号" width="500">
            <el-form :model="form1">
            <el-form-item label="选择房型" :label-width="formLabelWidth">
            <el-select v-model="form1.roomTypeId" placeholder="请选择房型" style="width: 200px;">
            <el-option v-for="item in roomtypes" :label="item.roomName" :value="item.id" />
            </el-select>
            </el-form-item>
            <el-form-item label="房号" :label-width="formLabelWidth">
                <el-input v-model="form1.roomCode" placeholder="房号" />
            </el-form-item>
            <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="form1.roomCodeSort" placeholder="排序" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form1.roomCodeMemo" placeholder="备注不超过9个字符" style="width: 200px;" />
            </el-form-item>
        </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="roomCodeDialog = false">关闭</el-button>
        <el-button type="primary" @click="RoomCodeUpd()">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>


      
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import type { ElTable, UploadInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const tableData = ref([]);

const roomcodes=reactive({
    RoomTypeId:null,
    status:null,
    RoomCode:''
})
//钩子函数
onMounted(()=>{
    RoomCodeGetlist();
    roomtypelist();
})
const RoomCodeGetlist=()=>{
    axios.get('http://120.26.135.179:8033/api/RoomCodeInfo',{
        params:{
            RoomTypeId:roomcodes.RoomTypeId,
            status:roomcodes.status,
            RoomCode:roomcodes.RoomCode
        }
    })
    .then((res)=>{
        tableData.value=res.data.data;
    })
}

const roomtypes=ref(
        [
        {
            roomName:'',
            id:null
        }
        ]
)
//获取房型信息
const roomtypelist=()=>{
    axios.get('http://120.26.135.179:8033/api/RoomType')
    .then((res)=>{
        roomtypes.value=res.data.data;
        console.log(roomtypes.value);
    })
}

const roomCodeDialog=ref(false);
//新增房号
const form=reactive({
    roomTypeId:null,
    roomCode:'',
    roomCodeSort:null,
    roomCodeMemo:''
})
const RoomCodeAdd=()=>{
    roomCodeDialog.value=true;
}

const RoomCodeInsert=()=>{
    axios.post('http://120.26.135.179:8033/api/RoomCodeInfo',form)
    .then((res)=>{
        if(res.data.code==0){
            ElMessage.success(res.data.message)
            roomCodeDialog.value=false;
            RoomCodeGetlist();
        }
        else{
            ElMessage.error(res.data.message)
        }
    })
}

//编辑房号
const roomCodeUpdateDialog=ref(false);
const RoomCodeUpdate=(row:any)=>{
    roomCodeUpdateDialog.value=true;
    form1.value=row;
}

const form1=ref({
    id:null,
    roomTypeId:null,
    roomCode:'',
    roomCodeSort:null,
    roomCodeMemo:''
})

const RoomCodeUpd=()=>{
    axios.put('http://120.26.135.179:8033/api/RoomCodeInfo',form1.value)
    .then((res)=>{
        if(res.data.code==0){
            ElMessage.success(res.data.message)
            roomCodeUpdateDialog.value=false;
            RoomCodeGetlist();
        }
        else{
            ElMessage.error(res.data.message)
        }
    })
}

//批量删除
const selectedRows = ref<InstanceType<typeof ElTable>>();
const handleAllDelete = () => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
 const selectedRowss=selectedRows.value?.getSelectionRows();
 if(!selectedRowss||selectedRowss.length==0){
   ElMessage.error('请选择要删除的数据');
   return;
 }
 const ids=selectedRowss.map((item:any)=>item.id);
 console.log(selectedRowss);
 console.log(ids);
  axios.delete('http://120.26.135.179:8033/api/RoomCodeInfo?Ids='+ids).then(res=>{
    if(res.data.code==0){
      ElMessage.success(res.data.message);
      RoomCodeGetlist();
    }
    else{
      ElMessage.error(res.data.message);
    }
  })
})
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    }) 
};
//批量下架
const handleAllUpdateStatus = () => {
  ElMessageBox.confirm(
    '确认要下架吗?',
    '错误',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
 const selectedRowss=selectedRows.value?.getSelectionRows();
 if(!selectedRowss||selectedRowss.length==0){
   ElMessage.error('请选择要下架的数据');
   return;
 }
 const ids=selectedRowss.map((item:any)=>item.id);
 console.log(selectedRowss);
 console.log(ids);
  axios.put('http://120.26.135.179:8033/api/RoomCodeInfoStatus?Ids='+ids).then(res=>{
    if(res.data.code==0){
      ElMessage.success(res.data.message);
      RoomCodeGetlist();
    }
    else{
      ElMessage.error(res.data.message);
    }
  })
})
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    }) 
};

//删除房号
const RoomCodeDelete=(row:any)=>{
    ElMessageBox.confirm('确认要删除吗?','错误',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(()=>{
        axios.delete('http://120.26.135.179:8033/api/RoomCodeInfoSingle?Id='+row.id)
        .then((res)=>{
            if(res.data.code==0){
                ElMessage.success(res.data.message)
                RoomCodeGetlist();
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
    })
    .catch(()=>{
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
    })
}
//上架房号
const RoomCodeStatus=(row:any)=>{
    ElMessageBox.confirm('确认要修改吗?','错误',{
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(()=>{
        axios.put('http://120.26.135.179:8033/api/RoomCodeInfoSingleStatus?Id='+row.id)
        .then((res)=>{
            if(res.data.code==0){
                ElMessage.success(res.data.message)
                RoomCodeGetlist();
            }
            else{
                ElMessage.error(res.data.message)
            }
        })
    })
    .catch(()=>{
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
    })
}
</script>
